<template>
    <div id="app">
          <transition :name="transitionName">
        <keep-alive>
            <router-view class="child-view"></router-view>
        </keep-alive>
          </transition>
    </div>
</template>
<script>
 
import vHead from './components/common/Header.vue';
import _ from 'underscore'
export default {
  name: 'app',
  data () {
    return {
      transitionName: ''
    }
  },
  activated(){
    console.log('sdf')
  },
  mounted () {
     var username=localStorage.getItem('username')
     this.$store.commit('setUserName',username)
     var userImg=localStorage.getItem('userImg')
     if(userImg){
       this.$store.commit('setUserImg',userImg)
     } 
     this.$mqtt.on('connect',()=>{
      this.$store.commit('setIsConnectMqtt',true)
     })
     //连接失败
    this.$mqtt.on('offline',()=>{
        this.$message.error({message:'mqtt服务器连接失败',duration:1000});
     }) 
    //连接不上定时重连，默认1秒
    this.$mqtt.on('reconnect',()=>{
      console.log('rsdssdffsdf')
     })
    
  },
  //监听路由的路径，可以通过不同的路径去选择不同的切换效果
  watch: {
    '$route' (to, from) {
      var path=to.path.split('/')[1]
      var flag=_.indexOf(['index','login','api'],path)
      if(localStorage.getItem('isWrite')=='noWrite'&&flag==-1){
        this.$message.error({message:'完善信息后才方可使用开放平台',duration:3000})
        this.$router.push({path:'/open/account'})
      }
      if(to.path == '/index'&& from.path!='/'){
        this.transitionName = 'slide-right';
      }else if(from.path!='/'){
        this.transitionName = 'slide-left';
      }
    }
  },
   mqtt: {
    '#' (data, topic) {
      console.log(topic + ': ' + String.fromCharCode.apply(null, data))
    }
  }
}
</script>

<style lang="less">
    @import "../static/css/main.css";
    @import "../static/css/color-dark.css";     /*深色主题*/
    /*@import "../static/css/theme-green/color-green.css";   浅绿色主题*/
.productAddWrap .el-textarea__inner {
    width: 50% !important;
}
.child-view {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transition: all .3s cubic-bezier(.55,0,.1,1);
  overflow:auto;
  overflow-x:hidden;
}
.slide-left-enter, .slide-right-leave-active {
  opacity: 0.2;
  -webkit-transform: translate(25%, 0);
  transform: translate(25%, 0);
}
.slide-left-leave-active, .slide-right-enter {
  opacity: 0.2;
  -webkit-transform: translate(-25%, 0);
  transform: translate(-25%, 0);
  }
        .title{
        font-size: 24px;
        font-weight: normal;
        border-bottom: 1px solid #ccc;
        color: #324157;
        text-indent: 17px;
        padding: 9px;
    }
    .new{
          position: absolute;
          top: 1%;
          right: 34px;
          background: #190629;
          color: #fff;
          border-radius: 5px;
          padding: 4px;
          border: none;
          box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.2);
          &:hover{
              cursor:pointer;
          }
        }
        .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #452146 !important;
    color: #fff;
}
        .el-input.is-disabled .el-input__inner{
      background-color: #ccd3dc !important;
    border-color: #8ba0ca !important;
    color: #4e576a !important;
    cursor: not-allowed;
        }
                 input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }
        input[type="number"]{
            -moz-appearance: textfield;
        }
              .el-input__inner{
        border: 1px solid #8c9cc1 !important;
        
      }
      .mybutton{
         width: 100%;
        height: 25px;
        border-radius: 3px;
        border: 1px solid #8c9cc1;
        font-size: 17px;
        color: #130a42;
        text-indent: 2%;
      }
      .none{
            text-align: center;
    font-size: 22px;
    color: #979090;
      }
      .el-textarea__inner{
        border-color: #8ba0ca !important;
      }
       .myAlert{
          span{
              font-size: 18px;
              margin:2% 0%;
              display: block;
          }
        }
        table.hovertable {
 font-family: verdana, arial, sans-serif;
    font-size: 11px;
    color: #333333;
    border-width: 1px;
    border-color: #999999;
    border-collapse: collapse;
    width: 100%;
}
table.hovertable th {
    background-color: #ffffff;
    border-width: 1px;
    border-bottom-width: 2px;
    padding: 8px;
    border-style: solid;
    border-color: #ccc;
    font-size: 15px;
    font-weight: bold;
}
table.hovertable tr {
  background-color:#fff;
}
table.hovertable td {
border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #cdc8c8;
    font-size: 13px;
}
</style>
